<template>
	<view>
		<view class="article-wrap-bottom">
			<image class="zan-icon-xin" src="../../../static/aixinzan.png" mode="" @click="zan"></image>
			<view class="article-zan-icon">
				<text>{{mylikesx}}</text>
			</view>
		</view>

		<!-- 反馈组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>

	</view>
</template>

<script>
	//顶部消息提示插件
	import HMmessages from "@/HMtolel/HM-messages/HM-messages.vue"
	import {
		mapState
	} from 'vuex'

	import {
		antiShake
	} from "@/components/until.js";
	export default {
		props: ['commIds', "mylikesx"],
		data() {
			return {
				commId: '',
				zanArr: '',
				zans: "" //赞
			}
		},
		components: {
			HMmessages,
		},
		methods: {
			//点赞先查询数据库是否登录
			zan() {
				const db = wx.cloud.database()
				db.collection('users').get().then(res => {
					if (res.data == 0) {
						console.log('未登录')
						this.HMmessages.show("请先去个人中心登录", {
							icon: 'error',
							fontColor: '#000000',
							background: '#f40000',
							iconColor: '#000000'
						})

					} else {
						console.log('已经登录')
						this.zanCommt(res)

					}
				}).catch(err => {
					console.log(err)
				})
			},


			//赞
			zanCommt(res) {
				let zanId = this.commId

				const db = wx.cloud.database()
				const _ = db.command
				db.collection('textarea').doc(zanId).update({
					data: {
						likes: _.inc(1),
					}

				}).then(res => {
					console.log(res)
					this.HMmessages.show("点赞成功,可连续点赞...", {
						icon: 'success',
						fontColor: '#000000',
						background: '#16f413',
						iconColor: '#000000'
					})
					let zanShuaxin = false
					this.$store.commit('zanS', zanShuaxin)
				}).catch(err => {
					console.log(err)
				})
			},
		},
		computed: {
			...mapState(['commentsIds', 'likesId']),
			coun() {
				// console.log(typeof(this.commentsIds.commentsIding))
				// console.log(this.likesId.likesIding)
				this.commId = this.commentsIds.commentsIding
				this.zans = this.likesId.likesIding
			}
		},

	}
</script>

<style lang="scss">
	.article-wrap-bottom {
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		flex-wrap: wrap;
		border-top: #f0f0f0 1px solid;
		padding: 15upx;

		.zan-icon-xin {
			width: 120upx;
			height: 80upx;
			margin-bottom: 30upx;
		}

		.zan-icon {
			width: 50upx;
			height: 50upx;
			margin-right: 10upx;
			border-radius: 50%;
		}

		text {
			color: #7e7e7e;
		}
	}

	.article-zan-icon {
		text {
			color: #00ffff;
			font-size: 50upx;
			padding-right: 10upx;
		}
	}
</style>
